<!--
@funciton: 登录对话框-选择角色
-->
<template>
  <el-form class="login-container">
    <h3 class="title">请双击选择角色</h3>
    <el-table :data="roleData" @row-dblclick="onDbClick" :highlight-current-row="true">
      <template v-for="(col, index) in roleColumns">
        <el-table-column :key="index" v-if="!col.hidden" :prop="col.prop" :label="col.label" :width="col.width"
        :align="col.align?col.align:'left'" :header-align="col.headerAlign?col.headerAlign:'left'">
          <template slot-scope="scope">
            <span v-if="col.renderer" v-html="col.renderer(scope,col.prop)">
            </span>
            <span v-else v-text="scope.row[col.prop]">
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </el-form>
</template>
<script>

var roleColumns = [
  {
    prop:"jsbh",
    label:"角色编号"
  },
  {
    prop:"jsmc",
    label:"角色名称"
  }
];

export default {
  name:"LoginRole",
  data(){
    return {
      roleColumns:roleColumns,
      roleData:[]
    };
  },
  methods:{
    onDbClick:function(row){// 双击角色
      this.$store.commit("selectRole", row.jsbh);
      this.$router.replace({
        path: "/homepage/homepage"
      });
    }
  },
  created:function(){
    var me = this;
    // 如果只有一行，则不需要选择
    if(me.$store.state.user.roles.length == 1){
      this.$store.commit("selectRole", me.$store.state.user.roles[0].jsbh);
      this.$router.replace({
        path: "/homepage/homepage"
      });
    }else{
      me.roleData = me.$store.state.user.roles;
    }
  }
}
</script>
<style lang="scss">

.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;

}
</style>
